import React, {Fragment, useEffect, useState} from 'react';
import type { TableColumnsType } from 'antd';
import {Button, Space, Table} from 'antd';
import {getApprovalList, handleApproval} from "@/services";
import {getLocalStorage} from "@/utils/localtion";
import Approval from "@/pages/example/Approval";

export interface DataType {
    key: string;
    name: string,
    status: number,
    createBy?:string,
    creator:string,
    formData: IFormData,
    approvalData:ApprovalData[],
    disabled: boolean,
}

interface IFormData  {
    vacation: string;
    rangeTime: any[];
    reason: string;
}

type ApprovalData = {
    status: number,
    userId?: string[],
    username:string[]
}


const App: React.FC = () => {
    const [open, setOpen] = useState(false)
    const [approvalData, setApprovalData] = useState<DataType>({
        disabled: false,
        createBy: "",
        creator: '',
        formData: {vacation: '', rangeTime: [], reason: ''},
        approvalData: [{status: 0, userId: [], username:[]}],
        key: "",
        name: "",
        status: 0
    })
    const [data, setData] = useState<WORKFLOW.ApprovalArg>();
    const [user, setUser] = useState<API.CurrentUser>()

    useEffect(()=>{
        initData()
    },[open])

    const initData = () =>{
        const userInfo = JSON.parse(getLocalStorage("userInfo"))
        setUser(userInfo)
        getApprovalList(userInfo?.id || "").then((result:any ) =>{setData(result)})
    }

    const dataSource: DataType[] = [];

    for (let dataKey in data) {
        const {id, name, status, createBy, creator, formData, approvalData} = data[dataKey];
        const disabled = createBy == user?.id || !Boolean(user?.id) // 自己不可以给自己审核后面的&&需要登录才行
        dataSource.push({key: id, name, status, createBy, formData, approvalData, creator, disabled})
    }
    const expandedRowRender = (record:DataType, index:number, indent:number, expanded:boolean) => {
        const {formData} = dataSource[index]
        const {vacation="", rangeTime=[], reason=""} = formData;
        const detailData = [{vacation, rangeTime, reason}]
        const columns: TableColumnsType<IFormData> = [
            { title: '假期类型', dataIndex: 'vacation' },
            { title: '请假时间', dataIndex: 'rangeTime'},
            {title: '请假原因', dataIndex:"reason"},
        ];

        return <Table columns={columns} dataSource={detailData} pagination={false} />;
    };

    function handleAgree(record: any) {
        console.log("同意")
        // 将status 改为1
        // 流程id, 用户id, 状态, 审批意见
        if(user?.id){
            const handleParam = {
                id: record.key,
                userId: user.id,
                status: 1
            }
            handleApproval(handleParam).then(()=> initData())
        }

        console.log(record)
    }

    function handleRefuse(record: any) {
        console.log("拒绝做某事")
        console.log(record)
        if(user?.id){
            const handleParam = {
                id: record.key,
                userId: user.id,
                status: 2
            }
            handleApproval(handleParam).then(()=>{initData()})
        }
    }

    function handleView(record: any) {
        setApprovalData(record)
        setOpen(true)
        console.log(record)
    }

    const columns: TableColumnsType<DataType> = [
        { title: '流程名', dataIndex: 'name',  },
        { title: '状态', dataIndex: 'status',  render: (value) => <a>{value?"已审":"待审"}</a>  },
        { title: '流程发起人', dataIndex: 'creator' },
        { title: 'Action', render: (record) => {
            const {disabled} = record
            return (<Space size="middle">
                    <Button type="link" disabled={disabled} onClick={() => handleAgree(record)}>同意</Button>
                    <Button type="link" disabled={disabled} onClick={() => handleRefuse(record)}>拒绝</Button>
                    <Button type="link" onClick={() => handleView(record)}>查看流程</Button>

                </Space>)
            }},
    ];

    return (
        <Fragment>
            <Table
                columns={columns}
                expandable={{ expandedRowRender}}
                dataSource={dataSource}
            />
            <Approval open={open} setOpen={setOpen} data={approvalData}/>
        </Fragment>
    );
};

export default App;
